<script>
export default {
  name: "goods-item",
  props: {  // 自定义属性
    info: {
      type: Object,
      default: {},
      request: true
    },
    //   goodsName: { // 自定义name
    //     default: 'myGoods', // 默认名
    //     type: String,
    //     request: true  // 必填
    //   },
    //   imgUrl: {  // 自定义照片
    //     default: 'https://img1.baidu.com/it/u=1818314105,4047054563&fm=253&fmt=auto&app=138&f=JPEG?w=256&h=256',
    //     type: String,
    //   },
    //   price: { // 自定义价格
    //     default: 0,
    //     type: Number,
    //   },
    //   oldPrice: {  // 自定义旧价格
    //     default: 0,
    //     type: Number,
    //   }
  },
  data() {
    return {
      num: 0,
      // price: 8.9,
      // totalAmount: 8.9

    }
  },
  methods: {
    goDetail() {
      alert('详情页面')
    },
    buy() {
      alert('购买成功')
    },
    addNum() {
      this.num++
      // this.totalAmount = this.price * this.num;
    },
    minus() {
      if (this.num > 1) this.num--
    },
    changeTotalAmount(val, oldval) {
      // console.log("val",val)
      // console.log("oldval",oldval)
      // this.totalAmount=val*this.price
    }

  },
  computed: {
    // totalAmount() {
    //   return this.num * this.price;
    // }
  },
  watch: {
    num: 'changeTotalAmount'
  }
};
</script>

<template>
  <div class="goods-item-box" @click="goDetail">
    <img :src="info.img">

    <div style="flex: 1">
      <div style="display: flex">
        <h1 style="flex: 1">{{ info.title }}</h1>
        <!--        <h3>推荐</h3>-->
        <slot name="top-right"></slot>
      </div>

      <p style="color: red">
        <del style="color: green">{{ info.oldPrice }}</del>
        {{ info.price }}
      </p>
      <button @click.stop="buy">购买</button>

      <div class="number-box">
        <button @click.stop="minus">-</button>
        <p>{{ num }}</p>
        <button @click.stop="addNum">+</button>
      </div>
      <slot name="button"></slot>
    </div>
  </div>
  <!--  <h1>总价：{{ totalAmount }}￥</h1>-->
</template>

<style scoped>
.goods-item-box {
  display: flex;
  padding: 20px;
  margin: 20px;
  border-radius: 10px;
  background: white;
  box-shadow: 0 0 5px rgba(58, 58, 58, 0.29);

  img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    padding: 0 15px 0 0;
    margin: auto;
  }
}

.number-box {
  display: flex;
  float: right;

  button {
    height: 20px;
  }

  p {
    padding: 0 20px;
    margin: 0;
  }
}
</style>